<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <router-view></router-view>
  </div>
  <script src="./vue.js"></script>
  <script src="./vue-router.js"></script>
  <script>
    // 用户列表组件配置对象
    const UserList = { 
      template: `
        <ul>
          <li><router-link to="/user/1001">tom</router-link></li>
          <li><router-link to="/user/1002">tony</router-link></li>
          <li><router-link to="/user/1003">lucy</router-link></li>
        </ul>
      ` 
    }
    // 用户详情组件配置对象
    const UserDetail = {
      template: `<div> 用户详情组件 用户的ID是：{{$route.params.id}}</div>`
      // 模板获取路径传参：$route.params.id
      // 组件的函数中获取：this.$route.params.id
    }
    const routes = [
      // (页面初始化的时候 跳转/ )默认根路径 / 显示用户列表组件
      { path: '/', component: UserList },
      // 动态路由
      { path: '/user/:id', component: UserDetail }
    ]
    const router = new VueRouter({ routes })
    // 根实例
    new Vue({
      el: '#app',
      router
    })
  </script>
</body>

</html>